<? include "$_SERVER[DOCUMENT_ROOT]/_guide/coding/inc_head.html"; ?>



<h2>CSS코드 작성 규칙</h2>

<h3>1. 기본 규칙</h3>
<ul class="notice-txt">
	<li>문서의 첫 줄에 인코딩을 선언하며 인코딩은 HTML과 동일한 인코딩을 지정한다. 작업 정보를 아래와 같은 방법으로 작성한다.</li>
</ul>

<h5>작업 정보</h5>
<pre class="brush: js">
@charset "utf-8";
/************************************************
Date : 2013-10-01 ~ 2014-11-30
Description : 설명
*************************************************/
</pre>
<h5>모든 속성은 영문 소문자로만 작성</h5>
<pre class="brush: js">
/* 잘못된 예 */
.class-name {color:#FFF;}
/* 올바른 예 */
.class-name {color:#fff;}
</pre>
<h5>작은 따옴표('') 사용 범위</h5>
<ul class="notice-txt">
	<li>폰트의 선언,filter, content에 작은 따옴표('')를 사용한다. 그 외의 경우는 사용하지 않는다.</li>
</ul>
<pre class="brush: js">
.class-name {'dotum';}
.filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img.png', sizingMethod='scale';}
.class-name:after{content:'.'}
.class-name {background:url(img.gif) no-repeat}
</pre>
<h5>세미콜론(;)</h5>
<ul class="notice-txt">
	<li>마지막 선언된 속성에도 세미콜론(;)을 사용한다.</li>
</ul>
<pre class="brush: js">
/* 잘못된 예 */
.class-name {margin-left:0;padding-left:10px}
/* 올바른 예 */
.class-name {margin-left:0;padding-left:10px;}
</pre>
<h5>공백의 사용</h5>
<ul class="notice-txt">
	<li>선택자 간, 중괄호간 한칸의 공백을 사용한다, 중괄호 안쪽 좌우에는 공백은 사용하지 않는다.</li>
</ul>
<pre class="brush: js">
/* 잘못된 예 */
.class-name, .class-name .child-class{background:url(../img/img.gif) no-repeat}
.class-name {padding:0; margin:0}
.class-name { padding:0;margin:0 }
/* 올바른 예 */
.class-name,
.class-name .child-class {background:url(../img/img.gif) no-repeat;}
.class-name {padding:0;margin:0;}
.class-name {padding:0;margin:0;}
</pre>





<h3>2. 들여쓰기</h3>
<ul class="notice-txt">
	<li>CSS 코드 작성시 들여쓰기는 허용하지 않는다.</li>
</ul>
<pre class="brush: js">
/* 잘못된 예 */
h5.class-name {
font-size:1.25em;
letter-spacing:-1px;
margin:0.5em 0 0 0;
}
.text-desc {color:#000}

/* 올바른 예 */
h5.class-name {font-size:1.25em;letter-spacing:-1px;margin:0.5em 0 0 0;}
</pre>





<h3>3. 줄 바</h3>
<ul class="notice-txt">
	<li>공통으로 사용되는 속성의 선택자간의 줄 바꿈은 허용하며 이 외의 줄바꿈은 허용하지 않는다.</li>
</ul>
<pre class="brush: js">
/* 잘못된 예 */
.class-name, .class-name .child-class{background:url(../img/img.gif) no-repeat;}

/* 올바른 예 */
.class-name,
.class-name .child-class {background:url(../img/img.gif) no-repeat;}
</pre>





<h3>4. 주석</h3>
<ul class="notice-txt">
	<li>CSS 주석 처리는 시작 주석을 작성하며 종료 주석은 작성하지 않는다. 종료코드 이후에 오는 요소에 한 칸 띄어 쓰기를 허용한다.</li>
</ul>
<pre class="brush: js">
/* title */
.title-type1 {margin:30px 0 10px 0;}

/* description */
.desc1 {padding:2px 0 0 15px;font-size:0.917em;}
</pre>





<h3>5. 빈줄</h3>
<ul class="notice-txt">
	<li>객체를 구분하기 위하여 코드 그룹 간 1줄의 빈 줄을 허용한다. 빈 줄의 1줄을 초과하지 않는다.</li>
</ul>
<pre class="brush: js">
/* 잘못된 예 */
/* title */
.title-type1 {margin:30px 0 10px 0;}
.title-type2 {margin:40px 0 10px 0;height:15px;padding:5px 0 0 29px;}


/* description */
.desc1 {padding:2px 0 0 15px;font-size:0.917em;}
.desc2 {margin-top:7px;padding-left:12px;}

/* 올바른 예 */
.title-type1 {margin:30px 0 10px 0;}

/* description */
.desc1 {padding:2px 0 0 15px;font-size:0.917em;}
</pre>





<h3>6. 선택자</h3>
<h5>공통 선택자</h5>
<ul class="notice-txt">
	<li>'*' 공통 선택자는 웹 페이지의 성능을 저하를 가져오기 때문에 사용하지 않는다.</li>
</ul>
<pre class="brush: js">
/* 잘못된 예 */
* {margin:0;padding:0}
</pre>
<h5 class="h5-content">id사용 자제</h5>
<ul>
	<li>레이아웃 요소로 예약되어 있는 id 외에 스타일을 주기 위하여 id를 선택자로 사용하는것을 자제하고 클래스를 사용한다.</li>
	<li>내부링크로 특정 영역으로 이동하기 위한 id, label 요소의 for 속성값과 짝을 짓기 위한 id는 사용할 수 있다.</li>
</ul>





<h3>7. 속성의 선언 순서</h3>
<ul class="notice-txt">
	<li>전체 속성의 선언 순서는 시계 방향으로 명시한다. top, right, bottom, left</li>
</ul>
<table class="tbl-type" cellspacing="0" cellpadding="0" summary="속성의 선언 순서">
	<thead>
		<tr>
			<th width="50">순서</th>
			<th width="150">속성</th>
			<th>속성 값</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td class="align-c">1</td>
			<td class="align-c">display</td>
			<td>none, block, inline, inline-block, inline-table, list-item, table, table-caption, table-cell, table-column, table-column-group, table-footer-group, table-header-group, table-row, table-row-group</td>
		</tr>
		<tr>
			<td class="align-c">2</td>
			<td class="align-c">visibility</td>
			<td>visible, hidden, collapse</td>
		</tr>
		<tr>
			<td class="align-c">3</td>
			<td class="align-c">overflow</td>
			<td>visible, hidden, scroll, auto</td>
		</tr>
		<tr>
			<td class="align-c">4</td>
			<td class="align-c">float</td>
			<td>left, right, none</td>
		</tr>
		<tr>
			<td class="align-c">5</td>
			<td class="align-c">position</td>
			<td>absolute, fixed, relative, static</td>
		</tr>
		<tr>
			<td class="align-c" rowspan="3">6</td>
			<td class="align-c">width</td>
			<td rowspan="3">auto, length(px), %</td>
		</tr>
		<tr>
			<td class="align-c">max-width</td>
		</tr>
		<tr>
			<td class="align-c">min-width</td>
		</tr>
		<tr>
			<td class="align-c" rowspan="3">7</td>
			<td class="align-c">height</td>
			<td rowspan="3">auto, length(px), %</td>
		</tr>
		<tr>
			<td class="align-c">max-height</td>
		</tr>
		<tr>
			<td class="align-c">min-height</td>
		</tr>
		<tr>
			<td class="align-c">8</td>
			<td class="align-c">margin</td>
			<td>auto, length(px, em), %</td>
		</tr>
		<tr>
			<td class="align-c">9</td>
			<td class="align-c">padding</td>
			<td>auto, length(px, em), %</td>
		</tr>
		<tr>
			<td class="align-c">10</td>
			<td class="align-c">border</td>
			<td>border-width, border-style, border-color</td>
		</tr>
		<tr>
			<td class="align-c">11</td>
			<td class="align-c">background</td>
			<td>background-color, background-image, background-repeat, background-attachment, background-position</td>
		</tr>
		<tr>
			<td class="align-c">12</td>
			<td class="align-c">font</td>
			<td>font-style, font-variant, font-weigth, font-size/line-height, font-family</td>
		</tr>
		<tr>
			<td class="align-c" rowspan="6">13</td>
			<td class="align-c">color</td>
			<td>hex_number, hex_number</td>
		</tr>
		<tr>
			<td class="align-c">letter-spacing</td>
			<td>normal, length</td>
		</tr>
		<tr>
			<td class="align-c">text-decoration</td>
			<td>none, underline, overline, line-through, blink</td>
		</tr>
		<tr>
			<td class="align-c">text-align</td>
			<td>left, right, center, justify</td>
		</tr>
		<tr>
			<td class="align-c">white-space</td>
			<td>normal, nowrap, pre, pre-line, pre-wrap</td>
		</tr>
		<tr>
			<td class="align-c">wrod-spacing</td>
			<td>normal, length(px, em, etc)</td>
		</tr>
		<tr>
			<td class="align-c">13</td>
			<td class="align-c">기타</td>
			<td>여기서 언급하지 않은 나머지 속성들은 폰트 속성 이후에 선언하며, 선언 순서는 무관하다.</td>
		</tr>
	</tbody>
</table>





<h3>8. 속성의 축약/약식 속성 사용</h3>
<ul class="notice-txt">
	<li>CSS 최적화를 위해 속성값을 축약 한다.</li>
</ul>
<table class="tbl-type" cellspacing="0" cellpadding="0" summary="축약 속성값">
	<thead>
		<tr>
			<th width="200">축약 전</th>
			<th width="200">축약 후</th>
			<th>설명</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>#ffffff</td>
			<td>#fff</td>
			<td><em>컬러의 코드값은 축약하지 않는다.</em></td>
		</tr>
		<tr>
			<td>background-position:left center</td>
			<td>background-position:0 50%</td>
			<td>문자로 표현은 지양하며 숫자 사용을 지향한다.</td>
		</tr>
		<tr>
			<td>top:0px</td>
			<td>top:0</td>
			<td>속성의 값이 0일 경우 단위를 표시하지 않는다.</td>
		</tr>
		<tr>
			<td>margin:15px 15px 15px 15px</td>
			<td>margin:15px</td>
			<td rowspan="3">속성의 값이 동일한 경우 top, right, bottom, left 순서대로 축약한다.</td>
		</tr>
		<tr>
			<td>margin:0 auto 0 auto</td>
			<td>margin:0 auto</td>
		</tr>
		<tr>
			<td>margin:25px 15px 30px 15px</td>
			<td>margin:25px 15px 30px</td>
		</tr>
	</tbody>
</table>
<h5>background 약식 속성</h5>
<ul class="notice-txt">
	<li>배경 이미지의 속성의 초기 선언시 반드시 background 단일 속성을 사용하며, 이후 배경적인 부분의 속성이 변경될 경우 background 관련 속성을 사용하여 제 선언 한다. 선언 순서는 background-attachment, background-color, background-image, background-repeat, background-position 이다.</li>
</ul>
<pre class="brush: js">
.class-name {border:1px solid #ccc;}
.class-name .child-bg-1 {background-position:0 -18px;}
.class-name .child-bg-2 {background-position:0 -36px;}
</pre>
<h5>border 약식 속성</h5>
<ul class="notice-txt">
	<li>테두리의 스타일이 동일할 경우 반드시 border 단일 속성을 사용하고 동일하지 않을 경우 부분적 border 속성을 사용할 수 있다.속성의 값의 선언 순서는 border-width, border-style, border-color의 순서이다.</li>
</ul>
<pre class="brush: js">
.class-name {border:1px solid #ccc;}
.class-name .top-border {border-top:2px solid #000;}
.class-name .left-border {border-left-width:0;}
</pre>
<h5>font 약식 속성</h5>
<ul class="notice-txt">
	<li>폰트의 약식 속성에 대하여는 부분적으로 허용하며 폰트의 크기와 라인의 높이를 동시에 제어를 하는 경우에 한하여 사용한다. 속성의 선언순서는 font-style font-variant font-weight font-size/line-height font-family 이며 style, variant, weight는 생략 가능하지만 font-size/line-height font-family는 필수 입력 사항이다.</li>
</ul>
<pre class="brush: js">
.class-name {font:1em/1.2 'dotum';}
</pre>





<h3>9. 미디어타입</h3>
<ul class="notice-txt">
	<li>미디어 타입은 공통(common.css)CSS 파일의 가장 아랫 부분에 선언한다. 또한 미디어 타입의 코드 작성시 1탭의 들여쓰기는 허용한다.</li>
</ul>
<pre class="brush: js">
...
...
/* Print */
@media print {
#header {display:none;}
}
</pre>
<h5>미디어 타입의 종류</h5>
<ul class="notice-txt">
	<li>all : 모든 출력장치</li>
	<li>aural : 음성출력</li>
	<li>braille : 점자 출력</li>
	<li>handheld : 포켓, 모바일</li>
	<li>print : 인쇄</li>
	<li>projection : 투사 장치</li>
</ul>





<h3>10. 크로스브라우징</h3>
<ul class="notice-txt">
	<li>IE7,8,9,10, chrome, firefox, opera, safari 브라우저에서 사이트이용이 가능해야한다.</li>
	<li>크로스브라우징을 위해 핵의 사용을 허용하며, IE의 경우 버전별 css 파일 사용이 가능하다.</li>
</ul>
<h5>핵</h5>
<pre class="brush: js">
.selector {*property:value}/* for ie7 */

:root .selector {property:value\9}/* for ie9,10 */

@-moz-document url-prefix() { /* for firefox */
	.selector {property:value;}
}
</pre>
<h5>조건부주석 - 버전별 css 파일 사용</h5>
<pre class="brush: js">
&lt;!--[if IE 7]>&lt;link type="text/css" rel="stylesheet" href="/css/ie7.css"/>&lt;![endif]-->
&lt;!--[if IE 8]>&lt;link type="text/css" rel="stylesheet" href="/css/ie8.css"/>&lt;![endif]-->
&lt;!--[if IE 9]>&lt;link type="text/css" rel="stylesheet" href="/css/ie9.css"/>&lt;![endif]-->
</pre>



<? include "$_SERVER[DOCUMENT_ROOT]/_guide/coding/inc_foot.html"; ?>